<template>
  <div class="home">
    <a-affix :offset-top="top">
      <a-row>
        <a-col :span="24">
          <div class="operator-container">
            <a-button @click="json = []; content = ''" style="margin-right: 20px">清空 JSON</a-button>
            <a-button @click="submit" style="margin-right: 10px" type="primary">
              点击生成 VO
            </a-button>
          </div>
        </a-col>
      </a-row>
    </a-affix>
    <a-row>
      <a-col :span="24">
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="包名" has-feedback validate-status="success">
            <a-input allow-clear v-model="packageName" id="success" placeholder="请输入包名"/>
          </a-form-item>
          <a-form-item label="类名" has-feedback validate-status="success">
            <a-input allow-clear v-model="className" id="success" placeholder="请输入类名"/>
          </a-form-item>
          <a-form-item label="类扩展名(后缀)" has-feedback validate-status="success">
            <a-input allow-clear v-model="extendName" id="success" placeholder="请输入类扩展名(后缀)"/>
          </a-form-item>
          <a-form-item label="粘贴 JSON" has-feedback validate-status="success">
            <a-input allow-clear v-model="content" id="success" placeholder="粘贴 JSON"/>
          </a-form-item>
          <a-form-item label="粘贴 JSON">
            <div class="json-container">
              <json-view theme="one-dark" :data="json"/>
            </div>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
  </div>
</template>

<script>

import jsonView from '@/components/JsonView/index'

import axios from 'axios'

export default {
  components: {jsonView},
  data() {
    return {
      top: 10,
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 12},
      },
      packageName: 'com.tlgen.vo',
      className: 'UserDTO',
      extendName: 'DTO',
      content: '',
      // json: [],
      json: [
        {
          "name": "",
          "age": 22,
          "address": "",
          "email": "",
          "phoneNumber": "",
          "checkStatus": "",
          "userOrderList": [
            {
              "orderId": "",
              "shopId": "",
              "addTime": "",
              "payTotal": "",
              "shopList": [
                {
                  "shopId": "",
                  "shopName": "",
                  "shopPrice": 30
                }
              ]
            }
          ],
          "car": {
            "carId": "",
            "carNo": "",
            "carBrand": ""
          }
        },
        {
          "name": "",
          "email": ""
        }
      ],
      isShowModal: false,
    }
  },
  methods: {
    submit() {
      let data = {
        "className": this.className,
        "packageName": this.packageName,
        "extendName": this.extendName,
        "json": this.json
      }
      let request = {
        method: 'post',
        url: 'http://localhost:3600/generator',
        data: data,
        responseType: 'blob'
      }
      let that = this
      axios(request).then(res => {
        console.log(res.data)
        let blob = new Blob([res.data], {type: "application/zip"});
        let objectUrl = URL.createObjectURL(blob);
        window.location.href = objectUrl;
        that.$message.success('生成成功!')
      })
    }
  },
  watch: {
    content(val) {
      this.json = JSON.parse(val)
    }
  }

}

</script>

<style scoped>

.home {
  width: 100%;
  height: calc(100vh);
}

.operator-container {
  margin-top: 10px;
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row-reverse;
}

.json-container {
  margin-top: 10px;
  width: 100%;
  height: 500px;
  overflow-y: scroll;
}

.json-container::-webkit-scrollbar {
  width: 0px;
}

</style>